<template>
  <div class="authentication">
    <div class="com_box">
      <div class="headerBox">
        <van-nav-bar
        title="我的认证"
          left-arrow
          @click-left="onClickLeft"
        ></van-nav-bar>
      </div>
      <div class="nullData" v-if="!this.userInfo.inside_user_id_card_no && !this.userInfo.inside_user_real_name&&onload">
        <div class="front">
          <div class="title">身份证正面照</div>
          <div class="zm">
            <van-uploader :after-read="onRead">
              <img :src="imgfront" alt="" >
            </van-uploader>
          </div>
        </div>
        <div class="front">
          <div class="title">身份证反面照</div>
          <div class="zm">
            <van-uploader :after-read="onReadtwo">
              <img :src="imgreverse" alt="" >
            </van-uploader>
          </div>
        </div>
        <div class="footer">
          <span @click="submint">开始认证</span>
        </div>
      </div>
      <div class="yesData" v-if="this.userInfo.inside_user_id_card_no && this.userInfo.inside_user_real_name">
        <div class="yes_box">
          <div class="name">{{userInfo.inside_user_real_name}}</div>
          <div class="cord">{{userInfo.inside_user_id_card_no}}</div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      onload: false,
      userInfo: {},
      imgfront: require('@/assets/img/user/zheng.png'),
      imgreverse: require('@/assets/img/user/fan.png'),
      imgfrontOne: '',
      imgfrontTwo: ''
    };
  },
  created() {
    this.setUserInfo()
  },
  methods: {
    async submint() {
      let _this = this
      let res = await this.$http.updateUserCardNo({
        image: _this.imgfrontOne,
        back: _this.imgfrontTwo
      })
      if (res) {
        this.$toast("恭喜您：认证成功!");
        this.setUserInfo()
      }
    },
    async setUserInfo() {
      let self = this
      let res = await this.$http.getUserInfo()
      if (res) {
        this.userInfo = res.data
        this.onload=true
      }
    },
    // 上传图片
    async onRead(val){
      let file = val.file
      const isLt2M = file.size / 1024 / 1024 < 20;
      if (!isLt2M) {
        this.$toast("上传图片大小不能超过 20MB!");
      }
      console.log(file)
      let myform = new FormData();
      myform.append("file", file);
      let res = await this.$http.ossImg(myform);
      if (res) {
        console.log(res)
        this.imgfront = res.data.src
        this.imgfrontOne = res.data.src
      }
    },
    // 上传图片
    async onReadtwo(val){
      let file = val.file
      const isLt2M = file.size / 1024 / 1024 < 20;
      if (!isLt2M) {
        this.$toast("上传图片大小不能超过 20MB!");
      }
      console.log(file)
      let myform = new FormData();
      myform.append("file", file);
      let res = await this.$http.ossImg(myform);
      if (res) {
        console.log(res)
        this.imgreverse = res.data.src
        this.imgfrontTwo = res.data.src
      }
    },
    onClickLeft() {
      this.$router.push({name:'myCenter'})
    }
  },
};
</script>
<style>
.authentication .van-nav-bar{
  background: none;
  border-bottom: none;
}
.authentication .van-hairline--bottom::after{
  border:none
}
.authentication .van-nav-bar__title{
  color: #fff;
}
.authentication .van-nav-bar .van-icon{
  color: #fff !important;
}
</style>
<style scoped>
.headerBox{
  background: transparent !important;
}
.com_box{
  width: 100%;
  height: 100vh;
  overflow: hidden;
  background: url('../../assets/img/user/yirenz.png') no-repeat;
  background-size: cover;
}
.authentication{
  height: 100vh;
  background: rgba(35, 101 ,116, 1);
}
.front{
  padding: .28rem .28rem .4rem;
  border-bottom: 1px solid #ddd;
}
.front:nth-child(2){
  border-bottom: none
}
.title{
  font-size: .28rem;
  color: #fff;
  font-weight: bold;
  margin-bottom: .28rem;
}
.zm{
  width: 5.8rem;
  height: 3.34rem;
  margin: 0 auto;
}
.zm img{
  width: 100%;
  height: 3.34rem;
}
.footer{
  position: fixed;
  left: 0;
  bottom: 0;
  background: #fff;
  height: 1.8rem;
  width: 100%;
  padding: .2rem .28rem 0;
  font-size: .4rem;
}
.footer span{
  display: inline-block;
  width: 6.94rem;
  height: .82rem;
  background: #00C8E7;
  text-align: center;
  line-height: .82rem;
  color: #fff;
  border-radius: .4rem;
  margin: 0 auto;
}
.yesData{
  padding: .78rem .28rem;
}
.yes_box{
  width: 100%;
  height: 3.6rem;
  background: url('../../assets/img/user/yes.png') no-repeat;
  background-size: 100% 100%;
  border-radius: .28rem;
  box-shadow: .03rem .21rem .17rem -0.11rem #084C57;
  position: relative;
}
.yes_box .name, .yes_box .cord{
  position: absolute;
  font-size: .36rem;
}
.yes_box .name{
  color: #fff;
  top: .56rem;
  left: .24rem;
}
.yes_box .cord{
  color: #027A8A;
  left: .24rem;
  bottom: .24rem
}
</style>
